<template>
  <div>
    <!-- 测试按钮 -->
    <div class="test-container">
      <h1>进度条测试页面</h1>
      <p>点击下面的按钮来测试可爱的进度条效果：</p>
      
      <button @click="startLoading" class="test-button" :disabled="isLoading">
        {{ isLoading ? '加载中...' : '开始加载测试' }}
      </button>
      
      <div v-if="!isLoading && completed" class="success-message">
        ✅ 加载完成！进度条效果测试成功！
      </div>
    </div>
    
    <!-- 加载进度条 -->
    <LoadingProgress 
      :isLoading="isLoading"
      :progress="loadingProgress"
      :loadingText="loadingText"
    />
  </div>
</template>

<script>
export default {
  name: 'TestLoading',
  components: {
    LoadingProgress: () => import('~/components/LoadingProgress.vue')
  },
  data() {
    return {
      isLoading: false,
      loadingProgress: 0,
      loadingText: '正在准备测试...',
      completed: false
    }
  },
  methods: {
    async startLoading() {
      this.isLoading = true
      this.loadingProgress = 0
      this.loadingText = '正在连接服务器...'
      this.completed = false
      
      try {
        // 模拟真实的加载过程
        const steps = [
          { progress: 20, text: '正在连接服务器...', delay: 500 },
          { progress: 40, text: '正在获取数据...', delay: 800 },
          { progress: 60, text: '正在处理数据...', delay: 600 },
          { progress: 80, text: '正在渲染界面...', delay: 400 },
          { progress: 95, text: '正在完成加载...', delay: 300 },
          { progress: 100, text: '加载完成！', delay: 500 }
        ]
        
        for (const step of steps) {
          await new Promise(resolve => setTimeout(resolve, step.delay))
          this.loadingProgress = step.progress
          this.loadingText = step.text
        }
        
        // 延迟隐藏加载界面
        setTimeout(() => {
          this.isLoading = false
          this.completed = true
        }, 800)
        
      } catch (error) {
        console.error('加载失败:', error)
        this.loadingText = '加载失败，请重试'
        setTimeout(() => {
          this.isLoading = false
        }, 2000)
      }
    }
  }
}
</script>

<style scoped>
.test-container {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgb(5, 150, 105);
  color: white;
  padding: 2rem;
  text-align: center;
}

.test-container h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.test-container p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.test-button {
  background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
  min-width: 200px;
}

.test-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 172, 254, 0.6);
}

.test-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.success-message {
  margin-top: 2rem;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: successPulse 2s ease-in-out infinite;
}

@keyframes successPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .test-container {
    padding: 1rem;
  }
  
  .test-container h1 {
    font-size: 2rem;
  }
  
  .test-container p {
    font-size: 1rem;
  }
  
  .test-button {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    min-width: 180px;
  }
}
</style>
